<template>
    <div>
        <van-form ref="form">
            <van-form ref="form">
                <van-field readonly clickable name="食堂" is-link label="食堂" required :value="formData.canteenName"
                    placeholder="请选择食堂" @click="showPicker = true" :rules=rules.canteenId />
                <van-field readonly clickable name="就餐开始日期" is-link label="就餐开始日期" required
                    :value="formData.eatStartDate" placeholder="请选择就餐开始日期" @click="showStartTimePicker = true"
                    :rules=rules.eatStartDate />
                <van-field readonly clickable name="就餐结束日期" is-link label="就餐结束日期" required :value="formData.eatEndDate"
                    placeholder="请选择就餐结束日期" @click="showEndTimePicker = true" :rules=rules.eatEndDate />
                <van-field v-model="formData.applntPhone" name="联系电话" label="联系电话" maxlength="11"
                    placeholder="请输入联系电话" />
            </van-form>
        </van-form>
        <fullLoading v-if="loading"></fullLoading>
        <!-- 食堂名称选择 -->
        <van-action-sheet v-model="showPicker" cancel-text="取消" :actions="canteenList" @select="onConfirm" />
        <!-- 就餐开始日期 -->
        <van-calendar v-model="showStartTimePicker" @confirm="onTimeConfirm" />
        <!-- 就餐结束日期 -->
        <van-calendar v-model="showEndTimePicker" @confirm="onEndTimeConfirm" />
    </div>
</template>
<script>
    import { add, upd } from '@/api/srvAssurance/smarcatering/strangeEat';
    export default {
        data() {
            return {
                showEndTimePicker: false,
                showPicker: false,
                showTypePicker: false,
                showStartTimePicker: false,
                formData: {
                    canteenName: '',
                    strangeEatId: '',
                    //食堂
                    canteenId: '',
                    //就餐开始日期
                    eatStartDate: '',
                    //就餐结束日期
                    eatEndDate: '',
                    //联系电话
                    applntPhone: '',
                },
                rules: {
                    canteenId: [
                        { required: true, message: '请选择食堂', trigger: 'change' }
                    ],
                    eatStartDate: [
                        { required: true, type: 'date', message: '就餐开始日期不能为空', trigger: 'change' },
                    ],
                    eatEndDate: [
                        { required: true, type: 'date', message: '就餐结束日期不能为空', trigger: 'change' },
                    ],
                    applntPhone: [
                        { pattern: this.$commonReg.phoneReg, message: this.$commonReg.phoneMsg, trigger: 'blur' }
                    ],
                },
                pickerTime: new Date(),
                canteenList: [],
                loading: false,
                isEdit: false,
                show: false,
            }
        },
        methods: {
            getData(obj) {
                this.isEdit = true;
                for (var key in this.formData) {
                    this.formData[key] = obj.data[key];
                }
            },
            // 保存
            handleSave(val) {
                this.loading = true;
                this.$refs.form.validate().then(() => {
                    if (this.formData.eatStartDate > this.formData.eatEndDate) {
                            this.$Notify({ type: 'warning', message: '开始日期应小于结束日期！' });
                            this.loading = false;
                            return;
                        }
                    let formData = {
                        strangeEatId: this.formData.strangeEatId,
                        //食堂
                        canteenId: this.formData.canteenId,
                        //就餐开始日期
                        eatStartDate: this.formData.eatStartDate,
                        //就餐结束日期
                        eatEndDate: this.formData.eatEndDate,
                        //联系电话
                        applntPhone: this.formData.applntPhone,
                    }
                    if (!this.isEdit) {
                        delete formData.strangeEatId;
                        add(formData).then(res => {
                            this.loading = false;
                            if (res.code === 1000) {
                                this.$Notify({ type: 'success', message: '保存成功！' });
                                this.$emit('close');
                                this.$emit('refresh');
                            }
                        }).catch(() => {
                            this.loading = false;
                        })
                    } else {
                        upd(formData).then(res => {
                            this.loading = false;
                            if (res.code === 1000) {
                                this.$Notify({ type: 'success', message: '保存成功！' });
                                this.$emit('close');
                                this.$emit('refresh');
                            }
                        }).catch(() => {
                            this.loading = false;
                        })
                    }
                })
            },
            // 食堂名称选择
            onConfirm(item) {
                this.formData.canteenId = item.canteenId;
                this.formData.canteenName = item.canteenName;
                this.showPicker = false;

            },
            // 预定日期选择
            onTimeConfirm(time) {
                this.formData.eatStartDate = new Date(time).format('yyyy-MM-dd');
                this.showStartTimePicker = false;
            },
            onEndTimeConfirm(time) {
                this.formData.eatEndDate = new Date(time).format('yyyy-MM-dd');
                this.showEndTimePicker = false;
            },
            // 包间选择
            // 重置表单
            resetForm() {
                this.pickerTime = new Date();
                this.formData = {
                    canteenName: '',
                    mealticketId: '',
                    strangeEatId: '',
                    //食堂
                    canteenId: '',
                    //就餐开始日期
                    eatStartDate: '',
                    //就餐结束日期
                    eatEndDate: '',
                    //联系电话
                    applntPhone: '',
                }
                setTimeout(() => {
                    this.$refs.form.resetValidation();
                })
                this.loading = false;
                this.isEdit = false;
                this.show = false;
            }
        }
    }
</script>

<style scoped lang='less'>
    .stepBox /deep/.van-stepper__input {
        width: 80px;
    }

    .top {
        width: 80%;
        margin: 0 auto;
        /* border: 1px solid orange; */
        display: flex;
        background-color: rgb(247, 247, 232);
        /* margin-top: 15px; */
        margin-bottom: 10px;

        .topTitle {
            width: 100%;
            margin: 10px 0;
            font-size: 10px;
            text-align: center;
        }

        ul li {
            /* text-align: left; */
            line-height: 22px;

        }

        .icon {
            /* width: 45px; */
            margin: 0 20px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
</style>